<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <title>首页</title>
    <link th:href="@{/assets/img/favicon.ico}"rel="icon" type="image/x-icon"  />
    <link th:href="@{/assets/css/loader.css}" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/plugins.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/plugins/apex/apexcharts.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/assets/css/dashboard/dash_1.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/plugins/notification/snackbar/snackbar.min.css}" rel="stylesheet" type="text/css" />
    <script th:src="@{/assets/js/loader.js}"></script>
    <link th:href="@{/plugins/sweetalerts/sweetalert2.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/plugins/sweetalerts/sweetalert.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/components/custom-sweetalert.css}" rel="stylesheet" type="text/css" />

    <link th:href="@{/plugins/notification/snackbar/snackbar.min.css}" rel="stylesheet" type="text/css" />
    <style>
        .menu {
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>

<body class="alt-menu sidebar-noneoverflow">
    <!-- BEGIN LOADER -->
    <div id="load_screen">
        <div class="loader">
            <div class="loader-content">
                <div class="spinner-grow align-self-center"></div>
            </div>
        </div>
    </div>
    <!--  END LOADER -->

    <!--  BEGIN NAVBAR  -->
    <div class="header-container fixed-top" >
        <header class="header navbar navbar-expand-sm expand-header">
            <a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><svg
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-menu">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg></a>

            <ul class="navbar-item flex-row ml-auto">
                <li class="nav-item dropdown user-profile-dropdown  order-lg-0 order-1">
                    <a href="javascript:void(0);" class="nav-link dropdown-toggle user" id="userProfileDropdown"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-user-check">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="8.5" cy="7" r="4"></circle>
                            <polyline points="17 11 19 13 23 9"></polyline>
                        </svg>
                    </a>
                    <div class="dropdown-menu position-absolute e-animated e-fadeInUp"
                         aria-labelledby="userProfileDropdown">
                        <div class="user-profile-section">
                            <div class="media mx-auto">
                                <img th:src="@{/assets/img/avatar.png}" class="img-fluid mr-2" alt="avatar">
                                <div class="media-body">
                                    <h5>[[${admin.username}]]</h5>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown-item">
                            <a href="/admin/userinfo">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-user">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg> <span>个人信息</span>
                            </a>
                        </div>
                        <div class="dropdown-item">
                            <a href="/admin/out">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-log-out">
                                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                    <polyline points="16 17 21 12 16 7"></polyline>
                                    <line x1="21" y1="12" x2="9" y2="12"></line>
                                </svg> <span>退出登录</span>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  END NAVBAR  -->

    <!--  BEGIN MAIN CONTAINER  -->
    <div class="main-container sidebar-closed sbar-open" id="container">
        <div class="overlay"></div>
        <div class="cs-overlay"></div>
        <div class="search-overlay"></div>
        <div class="sidebar-wrapper sidebar-theme">
            <nav id="sidebar">
                <ul class="navbar-nav theme-brand flex-row  text-center">
                </ul>

                <ul class="list-unstyled menu-categories" id="accordionExample">
                    <li class="menu active">
                        <a href="/admin" aria-expanded="true" class="dropdown-toggle">
                            <div class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-home">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                                <span>首页</span>
                            </div>
                        </a>
                    </li>
                    <li class="menu" th:if="${admin.type < 2}">
                        <a href="/admin/appsContacts" aria-expanded="true" class="dropdown-toggle">
                            <div class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-layout">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="3" y1="9" x2="21" y2="9"></line>
                                    <line x1="9" y1="21" x2="9" y2="9"></line>
                                </svg>
                                <span>团队管理</span>
                            </div>
                        </a>
                    </li>
                    <li class="menu" th:if="${admin.type < 2}">
                        <a href="/admin/activityList" aria-expanded="true" class="dropdown-toggle">
                            <div class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-box">
                                    <path
                                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                                    </path>
                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                </svg>
                                <span>活动管理</span>
                            </div>
                        </a>
                    </li>
                    <li class="menu">
                        <a href="/admin/userinfo" aria-expanded="true" class="dropdown-toggle">
                            <div class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-user">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                                <span>个人信息</span>
                            </div>
                        </a>
                    </li>
                    <li class="menu" th:if="${admin.type == 3||admin.type == 2 }">
                        <a href="/admin/share" aria-expanded="true" class="dropdown-toggle">
                            <div class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-target">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <circle cx="12" cy="12" r="6"></circle>
                                    <circle cx="12" cy="12" r="2"></circle>
                                </svg>
                                <span>邀请客户</span>
                            </div>
                        </a>
                    </li>
                    <li class="menu">
                        <a href="/admin/personInfo" aria-expanded="true" class="dropdown-toggle">
                            <div class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-users">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                <span>客户信息</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <!--  END SIDEBAR  -->

        <!--  BEGIN CONTENT AREA  -->
        <div id="content" class="main-content">
            <div class="layout-px-spacing">

                <div class="row layout-top-spacing">

                    <div class="col-12 layout-spacing">
                        <div class="widget widget-card-four">
                            <div class="widget-content">
                                <div class="w-content">
                                    <div class="w-info">
                                        <p class="">当前进行的活动</p>
                                        <h8 class="value">[[${activityName}]]</h8>
                                    </div>
                                    <div class="w-info">
                                        <p class="">总活动数</p>
                                        <h6 class="value">[[${zong}]]</h6>
                                    </div>
                                    <div class="w-info">
                                        <p class="">已使用名额</p>
                                        <h6 class="value">[[${usNum}]]</h6>
                                    </div>
                                    <div class="w-info">
                                        <p class="">可支配名额</p>
                                        <h6 class="value">[[${zhipei}]]</h6>
                                    </div>
                                    <div class="w-info" style="text-align: center;">
                                        <button class="btn btn-secondary mb-2 mr-2" onclick="window.location.href='/admin/down'"><svg
                                                xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-download">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                            <polyline points="7 10 12 15 17 10"></polyline>
                                            <line x1="12" y1="15" x2="12" y2="3"></line>
                                        </svg>
                                        </button>
                                    </div>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar bg-gradient-secondary" role="progressbar"
                                        th:style="${baifen}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 layout-spacing">
                        <div class="widget widget-chart-three">
                            <div class="widget-heading">
                                <div class="">
                                    <h5 class="">团队数据</h5>
                                </div>
                            </div>

                            <div class="widget-content">
                                <div id="uniqueVisits"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  END CONTENT AREA  -->

    </div>
    <script th:src="@{/assets/js/libs/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/popper.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/plugins/perfect-scrollbar/perfect-scrollbar.min.js}"></script>
    <script th:src="@{/assets/js/app.js}"></script>
    <script>
        $(document).ready(function () {
            App.init();
        });
    </script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/plugins/notification/snackbar/snackbar.min.js}"></script>
    <script th:src="@{/plugins/apex/apexcharts.min.js}"></script>
    <script th:src="@{/assets/js/ajax.js}"></script>



    <!-- BEGIN THEME GLOBAL STYLE -->
    <script th:src="@{/assets/js/scrollspyNav.js}"></script>
    <script th:src="@{/plugins/sweetalerts/sweetalert2.min.js}"></script>
    <script th:src="@{/plugins/sweetalerts/custom-sweetalert.js}"></script>
    <script th:src="@{/plugins/notification/snackbar/snackbar.min.js}"></script>
    <!-- END THEME GLOBAL STYLE -->

    <script type="text/javascript">

        if('[[${tixing}]]' !='0'){
            swal({
                title: '数据过期提醒',
                text: '[[${tixing}]]',
                timer: 3000,
                padding: '2em',
                onOpen: function () {
                    swal.showLoading()
                }
            }).then(function (result) {
                if (
                    // Read more about handling dismissals
                    result.dismiss === swal.DismissReason.timer
                ) {
                    console.log('I was closed by the timer')
                }
            })
        }

        $.ajax({
            type: "GET",//方法类型
            url: "/admin/dataChars" ,//url
            success: function (result) {
            if(result.code == "200"){
                var dataChars = JSON.parse(result.msg);
                var d_1options1 = {
                    chart: {
                        height: 350,
                        type: 'bar',
                        toolbar: {
                            show: false,
                        },
                        dropShadow: {
                            enabled: true,
                            top: 1,
                            left: 1,
                            blur: 2,
                            color: '#acb0c3',
                            opacity: 0.7,
                        }
                    },
                    colors: ['#2f35c3', '#29a8ff','#ff2f5d'],
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    legend: {
                        position: 'bottom',
                        horizontalAlign: 'center',
                        fontSize: '14px',
                        markers: {
                            width: 10,
                            height: 10,
                        },
                        itemMargin: {
                            horizontal: 0,
                            vertical: 8
                        }
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    series: [{
                        name: '总数',
                        data: dataChars["gift"]
                    },{
                        name: '已使用',
                        data: dataChars["uses"]
                    }, {
                        name: '未使用',
                        data: dataChars["sur"]
                    }],
                    xaxis: {
                        categories: dataChars["groupName"],
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shade: 'light',
                            type: 'vertical',
                            shadeIntensity: 0.3,
                            inverseColors: false,
                            opacityFrom: 1,
                            opacityTo: 0.8,
                            stops: [0, 100]
                        }
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val
                            }
                        }
                    }
                }


                var d_1C_3 = new ApexCharts(
                    document.querySelector("#uniqueVisits"),
                    d_1options1
                );
                d_1C_3.render();


                }
            },
            error : function() {
                Snackbar.show({
                    text: '请稍后再试',
                    pos: 'top-center'
                });
            }
        });
    </script>
</body>

</html>